<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Shop</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/templet.css" />
		<link rel="stylesheet" type="text/css" href="../css/mycommon.css" />
		<link rel="stylesheet" type="text/css" href="css/Shop.css" />
	</head>

	<body>
		<div id="shop" v-cloak>
			<header>
				<img :src="'https://foodievc.oss-ap-southeast-1.aliyuncs.com/'+shop.result.shop_info.shop_thumb" />
				<a href="javascript:history.go(-1)" class="mui-icon mui-icon-back"></a>
				<span class="mui-icon mui-icon-arrowdown"></span>
				<div class="fr pad-r-10">
					<dl id="right-lange" class="right-lange f-12"><dt><span>中文</span><em class="mui-icon mui-icon-arrowdown"></em></dt>
						<dd>
							<a @click="selectVal('zh')" class="on">中文</a>
							<a @click="selectVal('en')" class="">English</a>
							<a @click="selectVal('ms')" class="">Melayu</a>
						</dd>
					</dl>
				</div>
				<h3>{{shop.result.shop_info.shop_name}}</h3>
			</header>
			<div id="location">
				<ul>
					<li>
						<img :src="'https://foodievc.oss-ap-southeast-1.aliyuncs.com/'+shop.result.shop_info.shop_logo">
						<div>
							<h4>{{shop.result.shop_info.shop_name}}</h4>
							<span class="mui-icon mui-icon-star"></span><span class="mui-icon mui-icon-star"></span><span class="mui-icon mui-icon-star"></span><span class="mui-icon mui-icon-star"></span><span class="mui-icon mui-icon-star"></span>
							<div class="mui-icon mui-icon-location">12km</div>
						</div>
					</li>
				</ul>
				<ol>
					<li>
						<span class="mui-icon mui-icon-map"></span>
						<p>{{shop.result.shop_info.shop_address}}</p>
					</li>
					<li>
						<a :href="'tel：'+shop.result.shop_info.mobile">
							<img src="../img/phone.png" />
						</a>
					</li>

				</ol>
			</div>
			<section>
				<div class="Pay">
					<img src="../img/Hand1.png" />
					<h4>{{Language["1116"]}}</h4>
					<h5>{{Language["1120"]}}</h5>
					<button @click="pay" id="pay" type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">{{Language["1116"]}}</button>
				</div>
				<div class="Pay Payment">
					<img src="../img/Vip1.png" />
					<h4>{{Language["1117"]}}</h4>
					<h5>{{Language["1121"]}}</h5>
					<button id="join" type="button" class="mui-btn mui-btn-yellow mui-btn-outlined" @click="join">{{Language["1118"]}}</button>
					<div class="card">
						<div class="card-back"></div>
						<div class="content">
							<p :style="{backgroundImage:'URL(https://foodievc.oss-ap-southeast-1.aliyuncs.com/'+shop.result.shop_info.shop_logo+')'}"></p>
							<h4>{{shop.result.shop_info.shop_name}}</h4>
							<h5>{{shop.result.shop_card_info.name}}</h5>
						</div>
					</div>
				</div>
				<div class="Pay Ticket">
					<img src="../img/ticket2.png" />
					<h4>{{Language["1111"]}}</h4>
				</div>
			</section>
			<ul id="ticket">
				<li v-for="list in shop.result.shop_coupon_list">
					<span></span>
					<span></span>
					<div class="left">
						<h4>RM {{list.amount}}</h4>
						<h5>{{list.name}}</h5>
					</div>
					<div class="right">
						<div a="1" @click="receive(list.id)" class="bor">
							{{Language["1101"]}}
						</div>
					</div>
				</li>
			</ul>
			<div id="banner">
				<img src="../img/banner.jpg" />
			</div>
			<footer>
				<div v-for="list in shop_coupon.result.list" class="draw">
					<span></span>
					<span></span>
					<img src="../img/dashed.jpg">
					<div>
						<img :src="'https://foodievc.oss-ap-southeast-1.aliyuncs.com/'+list.shop_logo">
					</div>
					<div>
						<p>{{list.name}}</p>
						<p>{{list.shop_name}}</p>
						<p>{{Language["1109"]}}:{{list.endtime}}</p>
						<a :href="'../Ticket/Particulars.html?receive='+list.id">{{Language["1101"]}}</a>
					</div>
				</div>
				<div @click="ticket" id="l-ticket">
					<img src="../img/ticket.png">
					<span>{{shop.result.my_coupon_count}}</span>
				</div>
			</footer>
		</div>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/ajax.js"></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script>
			function login(shopID, memberID) {
				$.ajax({
					"type": "post",
					"dataType": "json",
					"timeout": 7000,
					"data": {
						"shop_id": shopID,
						"member_id": memberID
					},
					"url": "http://api.foodie.vc/yhohuat.php?ver=1&mo=u&l=zh&a=put_member_login",
					"headers": {
						"MEMBER-ENCODE": "",
						"SHOP-ENCODE": ""
					},
					"success": function(data) {
						if(!memberID) {
							console.log("没有memberid");
							localStorage.setItem("member_id", data.result.yingsoft_home_member_id);
						}
						localStorage.setItem("MEMBER-ENCODE", data.result.yingsoft_home_encode);
						localStorage.setItem("SHOP-ENCODE", data.result.yingsoft_home_shop_encode);
					},
					"error": function(e) {
						alert("你的账号出现异常"); //1成功 0失败 2登录超时 3帐号锁定
						$(window).attr("location", "../index.html");
					}
				})
			}

			function login_ajax() { //登录设置信息
				//获取店铺ID
				let shopID = 27;
				if(0) { //扫码登录获取信息 :暂时没有扫码设置为0
					console.log("微信登录");
				} else if(localStorage.getItem("member_id") != "0") {
					console.log("读取缓存的member_id");
					login(shopID, localStorage.getItem("member_id"));
				} else {
					console.log("没有member_id");
					login(shopID, "");
				}

			}
			login_ajax(); //登录
			//创建vue
			var app = new Vue({
				el: "#shop",
				data: {
					Language: {},
					shop: { //店铺的信息(首页)
						result: {
							shop_info: {
								shop_logo: ""
							},
							shop_card_info: {
								name: ""
							}
						}
					},
					shop_coupon: { //推荐优惠券
						result: {
							list: {}
						}
					}
				},
				methods: {
					Langes: function(v) {
						$.ajax({
							type: "get",
							dataType: "json",
							url: "../Langue/" + v + ".json",
							success: function(h) {
								app.Language = h;
							},
							error: function(e) {
								console.log("../Langue/" + v + ".json");
								console.log("语言包加载错误");
								debugger
							}
						});
					},
					dat: function() { //渲染页面登录首页数据
						let l = localStorage.getItem("lanuage"); //设置向页面请求语言
						common_ajax("get_shop_home", "", l, function(h) { //获取店铺信息
							app.shop = h;
							//会员卡的背景以及颜色
							if(h.result.shop_card_info.color) {
								$(".card-back").css("background", h.result.shop_card_info.color);
							} else {
								$(".card-back").css("backgroundImage", "https://foodievc.oss-ap-southeast-1.aliyuncs.com/" + h.result.shop_card_info.thumb);
							}
							//缓存卡会员卡id
							sessionStorage.setItem("card_id", h.result.shop_card_id);
							//缓存自己的会员卡id 没有为0
							sessionStorage.setItem("member_card_id", h.result.member_card_id);
							//缓存自己所持有优惠券的个数
							sessionStorage.setItem("my_coupon_count", h.result.my_coupon_count);
							//加载店铺信息后加载推荐优惠券信息
							common_ajax("get_other_shop_coupon_list", "", l, function(h) {
								console.log(h);
								app.shop_coupon = h;
							})
						});
					},
					selectVal: function(ele) {
						this.Langes(ele);
						common_ajax("get_shop_home", "", ele, function(h) { //第一步加载首页信息第二部加载其他店铺推荐信息
							app.shop = h;
							common_ajax("get_other_shop_coupon_list", "", ele, function(d) {
								app.shop_coupon = d;
							});
						});
						localStorage.setItem("lanuage", ele);
					},
					join: function() { //跳转到申请会员页面
						if(sessionStorage.getItem("member_card_id") != "0") {
							$(window).attr('location', '../Payment/Card.html');
						} else {
							$(window).attr('location', '../Payment/Register.html');
						}
					},
					pay: function() { //跳转到支付界面
						$(window).attr('location', '../Payment/Payment.html');
					},
					receive: function(a) { //跳转领取优惠券页面
						$(window).attr('location', '../Ticket/Particulars.html?receive=' + a);
					},
					ticket: function() { //我的优惠券
						$(window).attr('location', '../Ticket/MyTicket.html');
					}, //设置页面的语言

				}
			})

			//首次加载语言
			if(localStorage.getItem("lanuage")) {
				app.Langes(localStorage.getItem("lanuage"));

			} else {
				var navlange = navigator.language.toLowerCase().substr(0, 2)
				var langarr = ["zh", "en", "ms"]
				if(langarr.indexOf(navlange) == -1) navlange = "en"
				app.Langes(navlange);
				localStorage.setItem("lanuage", navlange); //设置默认语言用于其他页面做首次处理
			}
			//默认select
			function lanuage() {
				var l = localStorage.getItem("lanuage");
				if(l) {
					if(l == "zh") {
						$("#right-lange>dt span").text("中文");
					} else if(l == "en") {
						$("#right-lange>dt span").text("English");
					} else if(l == "ms") {
						$("#right-lange>dt span").text("Melayu");
					}
				} else {
					$("select").find("option[value='en']").attr("selected", true);
					$("#right-lange>dt span").text("English");
				}
			}
			//判断用户是否办理会员卡(点击首页card)
			$(".card-back").click(function() {
				let card = sessionStorage.getItem("card_id");
				if(card) {
					$(window).attr("location", "../Payment/Card.html");
				} else {
					$(window).attr("location", "../Payment/Register.html");
				}
			})
			lanuage();
			app.dat();
			/*****************************************/
			//选择语言 并且选择出对应的语言
			$("#right-lange").click(function() {
				$("#right-lange dd").slideToggle();
			})
			$("#right-lange dd a").on("click", function() {
				$("#right-lange>dt span").text($(this).text());
			})
		</script>
	</body>

</html>